<template>
  <div class="tinymce-popup-wrap">
    <span
      class="tinymce-popup-btn"
      @click="dialogVisible = true"
    >
      <slot></slot>
    </span>
    <el-dialog
      v-model="dialogVisible"
      width="500"
      append-to-body
      class="tinymce-popup-dialog"
    >
      <div v-html="getContentHtml"></div>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";

const props = defineProps({
  phtml: {
    type: String,
    default: ""
  }
});

const getContentHtml = computed(() => {
  return decodeURIComponent(props.phtml);
});

const dialogVisible = ref(false);
</script>
<style lang="scss" scoped>
.tinymce-popup-wrap {
  display: inline-block;
}

.tinymce-popup-btn {
  color: var(--form-theme-color, var(--el-color-primary));
  cursor: pointer;
}
</style>
<style lang="scss">
.tinymce-popup-dialog .el-dialog__header {
  border: none !important;
}
</style>
